<template>
  <div class="home">
    <div class="one">
      <div class="bx1">
        <div class="two">
          <h1>品质租房随心居</h1>
          <p>10年 ，10城 ，进50万业主、500万租客的选择</p>
        </div>
        <div class="scree">
          <ul>
            <li :class="{ 'active': sou == 1 }" @click="sou = 1">&nbsp&nbsp全部</li>
            <li :class="{ 'active': sou == 2 }" @click="sou = 2">&nbsp&nbsp合租</li>
            <li :class="{ 'active': sou == 3 }" @click="sou = 3">&nbsp&nbsp整租</li>
            <li :class="{ 'active': sou == 4 }" @click="sou = 4">心公寓</li>
            <li :class="{ 'active': sou == 5 }" @click="sou = 5">随心舍</li>
          </ul>
          <div class="scree-value">
            <input type="text" v-model="searchvalue" placeholder="请输入名称、小区、地铁开始找房" />
            <div @click="$router.push('/MapContainer')" class="map">
              <img style="margin-right: 5px; width: 30px; height: 30px" src="../assets/map.jpg" alt="" />
              地图找房
              <div class="yy1"></div>
            </div>
            <div @click="$router.push('/A'),search()" class="go">开始找房<div class="yy2"></div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="bx2">
      <div class="four">
        <ul>
          <li>
            <img src="https://webimg.ziroom.com/f14b0a6b-9b21-4fb8-9e4c-9da3c4f371b8.jpg" alt="" />
          </li>
          <li>
            <img src="https://webimg.ziroom.com/25e3ac3e-b416-4e8d-bd8a-44a833033d59.jpg" alt="" />
          </li>
          <li>
            <img src="https://webimg.ziroom.com/c005bd80-606c-422b-8880-79e203a67c34.jpg" alt="" />
          </li>
          <li>
            <img src="https://webimg.ziroom.com/d45b362a-b9f0-4a1a-9868-e38bc4035539.jpg" alt="" />
          </li>
        </ul>
        <ul>
          <li @click="$router.push('/A'),search()">
            <div class="yd">
              <img src="../assets/jt.jpg" alt="" />
              <div>
                <h2>租房</h2>
                <p>合租/整租/随心寓/曼舍</p>
              </div>
            </div>

          </li>
          <li @click="$router.push('/fuwu')">
            <div class="yd">
              <img src="../assets/jt.jpg" alt="" />
              <div>
                <h2>服务</h2>
                <p>保洁/搬家/维修</p>
              </div>
            </div>
          </li>
          <li>
            <div @click="$router.push('/file')" class="yd">
              <img src="../assets/jt.jpg" alt="" />
              <div>
                <h2>生活</h2>
                <p>随心生活社区/随心全屋智能</p>
              </div>
            </div>
          </li>
          <li @click="$router.push('/yz')">
            <div class="yd">
              <img src="../assets/jt.jpg" alt="" />
              <div>
                <h2>业主</h2>
                <p>房屋出租/整栋合作</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <img style="display:block;margin:10px auto;" src="../assets/zz.png">
    </div>
    <div class="five">
      <img src="https://webimg.ziroom.com/c26467e3-ba7f-497e-94b9-02e48088becc.png" alt="">
      <p>从家具板材、装修材料、施工管理、空气质量管理、空置期设置等维度提升产品品质</p>
      <img @click="bf = true" src="https://static8.ziroom.com/phoenix/pc/images/2019/videoplay.png" alt="">
      <span @click="bf = true">查看视频</span>
      <img @click="bf = false, play()" :class="{ 'active': bf }" id="off" src="../assets/off.png" alt="">
      <video :class="{ 'active': bf }" controls="controls" id="video"
        style="background-color:#000;width:60vw;height:20vw" src="https://media3.ziroom.com/ziroom_breath.mp4"></video>
    </div>
    <div class="bx3">
      <div class="six">
        <img src="../assets/zz.png" alt="">
        <ul>
          <li>
            <span>01</span>
            <h4 :class="{ 'active': ss == 1 }">随心保洁</h4>
          </li>
          <li>
            <span>02</span>
            <h4 :class="{ 'active': ss == 2 }">随心搬家</h4>
          </li>
          <li>
            <span>03</span>
            <h4 :class="{ 'active': ss == 3 }">随心家修</h4>
          </li>
        </ul>
        <div class="swiper">
          <span>SUIXINJ</span>
          <div class="s1">
            <div class="s2" :class="`active${ss}`">
              <img src="https://webimg.ziroom.com/35ae237e-2461-4fe2-ae1d-51f573e6c63f.jpg" alt="">
              <img src="https://webimg.ziroom.com/d9d8ec36-af0d-457b-a843-5fa1882c61fa.jpg" alt="">
              <img src="https://webimg.ziroom.com/650a421a-3b7b-4934-a798-be8607665c07.jpg" alt="">
            </div>
          </div>
          <div class="value">
            <h2>{{ values.h[ss - 1] }}</h2>
            <p>{{ values.p[ss - 1] }}</p>
            <p>{{ values.pp[ss - 1] }}</p>
          </div>
          <div class="qh">
            <img @click="sb" style="width:50px;height:50px" src="../assets/zuo.png" alt="">
            <img style="width:150px;height:10px" :src="require('../assets/' + ss + '.png')" alt="">
            <img @click="sss" style="width:50px;height:50px" src="../assets/you.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="seven">
      <img style="display: block;width:260px;height:82px;margin:60px auto" src="../assets/cc.jpg" alt="">
      <ul>
        <li>
          <img :class="{ 'active': fd == 1 }" src="https://webimg.ziroom.com/963bf55e-baf0-417f-84c3-60742d11ac44.jpg"
            alt="正在加载..." />
          <div @mouseover="fd = 1" @mouseleave="fd = 0" class="kk"></div>
          <p>2019自如国际胡同节</p>
          <p>1000+中外自如客在这座京城二环的百年院落里，一起玩转Bazinga4王争霸赛/CP匹配交友 / 京城最IN中英脱口秀 / Silent Disco… 拯救平线心电图，逛吃逛喝笑翻...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 2 }" src="https://webimg.ziroom.com/461edb17-1685-450a-8b29-4c7e6ae96755.jpg"
            alt="正在加载..." />
          <div @mouseover="fd = 2" @mouseleave="fd = 0" class="kk"></div>
          <p>2019自如跨年趴</p>
          <p>喝最烈的酒，蹦最野的迪，700位自如客齐跨年，嗨皮共享金猪年，将欢乐和感动从2018带到2019...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 3 }" src="https://webimg.ziroom.com/24fd2a34-32f8-49f6-98fc-8b8884fa7b9b.jpg"
            alt="正在加载..." />
          <div @mouseover="fd = 3" @mouseleave="fd = 0" class="kk"></div>
          <p>自如驿跨年音乐会</p>
          <p>在三里屯团结自如驿穿越至90’s找寻旧时欢乐，超酷乐队嗨翻全场，惊喜抽奖、趣味游戏、童年零食和饮料……百位自如客携手倒计时喜提2019...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 4 }" src="https://webimg.ziroom.com/aa677920-bc8b-4f35-9395-e9dbee237977.jpg"
            alt="正在加载..." />
          <div @mouseover="fd = 4" @mouseleave="fd = 0" class="kk"></div>
          <p>地下72小时遇见派对</p>
          <p>都市单身青年齐聚愚园路，这是一场聚集恋爱、游戏、音乐、艺术的社交派对。多个潮酷艺术装置，“CP”互动体验区，纵享沉浸式浪漫嗨心体验，开启跨越时空遇见...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 5 }" src="https://webimg.ziroom.com/4cbf9e47-fcbd-4f37-9792-490215b1dc2b.jpg"
            alt="正在加载..." />
          <div @mouseover="fd = 5" @mouseleave="fd = 0" class="kk"></div>
          <p>直击万圣节鬼混现场</p>
          <p>五座城市，八场线下活动，五百位自如客参与，惊魂鬼屋、尖叫PK、捉鬼有礼、百鬼夜行……这个万圣节，自如与你一起“妆”神弄鬼，魔人狂欢一整夜...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 6 }" src="https://webimg.ziroom.com/53ce51e9-4968-461b-a208-eaf7e0536bac.jpg"
            alt="正在加载..." />
          <div @mouseover="fd = 6" @mouseleave="fd = 0" class="kk"></div>
          <p>自如西塘汉服节</p>
          <p>36位自如客的汉服体验之旅，36小时的沉浸式游戏互动。行烟雨长廊，驻足安境桥上，南湖有佳人，回忆梢上...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 7 }" src="https://webimg.ziroom.com/2ef2ca0c-4487-4104-a73a-21a0e7d9c471.jpg"
            alt="正在加载..." />
          <div @mouseover="fd = 7" @mouseleave="fd = 0" class="kk"></div>
          <p>海洋球欢乐到家服务</p>
          <p>自如联合什刹海共同打造了一间只存在14天的小隐隐于什刹海边的“海景房”，中秋夜和自如客们倚舟赏月，对酒当歌，一起吃蟹，祝大家节日快乐...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 8 }" src="https://webimg.ziroom.com/4d19cb1e-2be3-4754-81ec-c734d3fe5d67.jpg"
            alt="正在加载..." />
          <div @mouseover="fd = 8" @mouseleave="fd = 0" class="kk"></div>
          <p>自如生活节 | 看海人</p>
          <p>自如联合什刹海共同打造了一间只存在14天的小隐隐于什刹海边的“海景房”，中秋夜和自如客们倚舟赏月，对酒当歌，一起吃蟹，祝大家节日快乐...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 9 }" src="https://webimg.ziroom.com/28daeae7-fe25-448f-a0ea-faadebb37709.jpg"
            alt="正在加载..." />
          <div @mouseover="fd = 9" @mouseleave="fd = 0" class="kk"></div>
          <p>自如生活节 | 喜剧周末</p>
          <p>17场脱口秀 / 3个展览 /2场SILENT DISCO / 1个独立书店，在北京夏天的尾巴里，史炎、ROCK等脱口秀大咖在安静的东二环内的自如Z-SPACE造了一个梦...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 10 }" src="https://webimg.ziroom.com/7173e8e9-4350-4410-aed8-a0ce43214da6.jpg"
            alt="正在加载..." />
          <div @mouseover="fd = 10" @mouseleave="fd = 0" class="kk"></div>
          <p>自如生活节 | 不房结婚</p>
          <p>七夕，自如生活节系列活动之“不房结婚”在北京二环内的四合院Z-SPACE举行。9对自如客新人齐聚三百年银杏树下，共同迈入了婚姻的殿堂...</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sou: 1,
      bf: false,
      ss: 1,
      searchvalue:"",
      values: {
        "h": ["随心保洁", "随心搬家", "随心家修"], "p": ["下一刻,明亮如新", "每一次搬家都珍贵", "用心守护 美好如初"],
        "pp": ["自如旗下专业保洁品牌，成立八年至今，形成专属清洁服务标准——人员严选、工具放心、流程规范。为用户提供日常保洁、玻璃清洁等多样保洁产品，持续为市场提供高品质保洁服务。"
          , "自2014年上线起，始终坚持：每一项服务标准清晰明确，每个物件精心打包安放。成立4年来，打磨和研发多项产品满足用户个性化搬家需求，目前已覆盖北京、上海、天津等9个城市。",
          "自如旗下O2O生活服务产品，旨在为客户提供“专业便捷、安全透明”的全能维修。月交付15万+，拥有超过1400人的自如巧匠，覆盖装修后市场、家电售后全生态，率先实现标准化和数据化管理，让客户无后顾之忧。"]
      },
      fd: 0
    }
  },
  mounted() {
  },
  methods: {
    search() {
      this.$store.commit("updateValue", this.searchvalue);//保持搜索内容到全局
    },
    play() {
      document.getElementById("video").pause();
    },
    sb() {//动态滚动条图片路径，1.png 2.png 3.png(分别显示不同进度)
      if (this.ss > 1) { this.ss-- }else{this.ss=3}
    },
    sss() {//动态滚动条图片路径，1.png 2.png 3.png(分别显示不同进度)
      if (this.ss < 3) {
        this.ss++
      }else{
        this.ss=1
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.one {
  overflow: hidden;
  width: 100%;
  height: 500px;
  box-sizing: border-box;
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
  url("https://webimg.ziroom.com/acde29d9-78e7-4953-9ee8-bf7717d0352f.jpg");
  background-size:cover;
  
}

.bx1 {
  padding-top: 120px;
  height: 100%;
  width: 1252px;
  margin: auto;
}

.bx3 {
  padding-top: 120px;
  height: 100%;
  width: 1252px;
  margin: auto;
}

.two {
  color: #fff;
  width: 100%;
  height: 105px;

  h1 {
    font-weight: bold;
    font-size: 60px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  }

  p {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    margin-top: 10px;
    font-size: 20px;
  }
}

.scree {
  margin-top: 80px;

  ul {
    list-style-type: none;
    display: flex;
    font-size: 17px;
    color: #fff;
    position: relative;

    li {
      cursor: pointer;
      margin-right: 24px;
    }

    li::after {
      content: "";
      position: absolute;
      z-index: 2;
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 15px solid rgb(255, 255, 255);
      margin-left: 15px;
      opacity: 0;
    }

    li.active::after {
      opacity: 1;
    }
  }
}

.scree-value {
  margin-top: 10px;
  display: flex;

  input {
    outline: none;
    box-sizing: border-box;
    display: block;
    padding-left: 20px;
    font-size: 15px;
    height: 50px;
    width: 411px;
    border: 0;
    box-shadow: 0 0 2px rgb(255, 145, 35);
  }

  .yy1,
  .yy2 {
    transition: all 0.5s;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 100%;
    background-color: rgba(0, 0, 0, 0.1);
  }

  .map {
    border-left: 1px solid rgb(226, 226, 226);
    cursor: pointer;
    width: 132px;
    box-sizing: border-box;
    color: rgb(123, 123, 123);
    background-color: #fff;
    font-size: 15px;
    text-align: center;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;

    &:hover .yy1 {
      top: 0;
    }
  }


  .go {
    cursor: pointer;
    position: relative;
    width: 132px;
    text-align: center;
    height: 50px;
    color: #fff;
    background-color: rgb(254, 150, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    &:hover .yy2 {
      top: 0;
    }
  }
}

.bx2 {
  padding-top: 50px;
  height: 100%;
  width: 1252px;
  margin: auto;

  .four {
    width: 100%;
    height: 340px;
    display: flex;
    flex-direction: column;
    align-content: center;
    position: relative;

    ul:nth-child(1) {
      height: 203px;
      width: 100%;
      display: flex;
      list-style-type: none;
      justify-content: space-between;

      li {
        width: 270px;
        height: 203px;
        overflow: hidden;
        border-radius: 3px;

        img {
          width: 100%;
          height: 100%;
          transition: all 2s;

          &:hover {
            transform: scale(1.2, 1.2);
          }
        }
      }

    }

    ul:nth-child(2) {
      height: 92px;
      width: 100%;
      display: flex;
      list-style-type: none;
      position: absolute;
      top: 160px;
      z-index: 1;
      display: flex;
      justify-content: space-between;

      li {
        width: 230px;
        height: 100%;
        overflow: hidden;
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 2px 8px rgb(221, 212, 212);

        .yd {
          width: 200%;
          height: 100%;
          cursor: pointer;
          transition: all 0.7s;
          transform: translateX(-50%);

          &:hover {
            transform: translateX(0);
          }

          img {
            display: block;
            float: left;
            width: 50%;
            height: 100%;
          }

          div {
            float: left;
            width: 50%;
            height: 100%;
            text-align: center;
            padding-top: 20px;

            p {
              margin-top: 5px;
              color: rgb(139, 139, 139);
              font-size: 15px;
            }
          }
        }
      }

      li:nth-child(1) {
        margin-left: 20px;
      }

      li:nth-child(4) {
        margin-right: 20px;
      }
    }
  }
}

.five {
  width: 100%;
  height: 595px;
  position: relative;
  overflow: hidden;
  text-align: center;
  background-image: url("https://webimg.ziroom.com/b0e90144-c06a-4ab1-9e39-2831c55c7210.jpg");

  img:nth-child(1) {
    width: 850px;
    height: 152px;
    display: block;
    margin: auto;
    margin-top: 100px;
  }

  p {
    text-align: center;
    color: #fff;
    font-size: 20px;
    margin: 20px auto;
  }

  img:nth-child(3) {
    width: 72px;
    height: 72px;
    display: block;
    margin: auto;
    margin-top: 100px;
    cursor: pointer;
  }

  span {
    color: #fff;
    cursor: pointer;
  }

  #off {
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 3;
    bottom: 23.2vw;
    right: 17.5vw;
    display: none;
    cursor: pointer;
  }

  #video {
    position: absolute;
    z-index: 2;
    display: none;
    margin-left: 20%;
    bottom: 80px;
  }

  #video.active,
  #off.active {
    display: block;
  }
}

.six {
  width: 100%;
  text-align: center;

  img {
    width: 260px;
    height: 86px;
  }

  ul {
    margin-top: 20px;
    width: 100%;
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;

    li {

      span {
        opacity: 0.15;
        font-size: 48px;
        color: rgb(113, 113, 113);
        text-align: center;
        line-height: 48px;
        font-weight: 600;
      }

      h4 {
        font-size: 24px;
        margin: -14px 0 0;
        color: rgba(0, 0, 0, .85);
        font-weight: 400;
        border-bottom: 6px solid rgb(255, 255, 255);
      }

      h4.active {
        border-bottom: 6px solid rgb(255, 130, 77)
      }
    }
  }

  .swiper {
    margin-top: 50px;
    width: 100%;
    position: relative;

    span {
      position: absolute;
      z-index: -1;
      top: 200px;
      left: -70px;
      font-size: 120px;
      font-weight: 600;
      color: rgb(244, 244, 244);
      display: block;
      transform: rotate(90deg);
    }

    .s1 {
      float: right;
      width: 870px;
      height: 580px;
      overflow: hidden;

      .s2 {
        width: 300%;
        height: 100%;
        transition: all 0.5s;
        transform: translateX(-1740px);
      }

      .s2.active3 {
        transform: translateX(-1740px);
      }

      .s2.active2 {
        transform: translateX(-870px);
      }

      .s2.active1 {
        transform: translateX(0);
      }

      img {
        float: right;
        width: 870px;
        height: 580px;
        transition: all 1s;

        &:hover {
          transform: scale(1.2);
        }
      }
    }

    .value {
      padding: 32px;
      width: 330px;
      height: 225px;
      position: absolute;
      z-index: 1;
      background-color: #fff;
      border-radius: 6px;
      box-shadow: 0 0 10px rgb(226, 226, 226);
      top: 120px;
      left: 120px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      h2 {
        font-size: 30px;
        color: rgb(42, 42, 42);
      }

      p:nth-child(2) {
        font-size: 20px;
        color: rgb(134, 133, 133);
      }

      p:nth-child(3) {
        font-size: 15px;
        color: rgb(168, 168, 168);
        line-height: 30px;
      }
    }
  }

  .qh {
    opacity: 0.7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 260px;
    height: 50px;
    position: absolute;
    z-index: 2;
    top: 520px;
    left: 100px;
  }
}

.seven {
  margin-top: 40vw;
  width: 100vw;

  ul {
    width: 100vw;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    li {
      width: 20%;
      height: 20vw;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-evenly;

      img {
        width: 100%;
        height: 100%;
        transition: all 1.5s;

        &.active {
          transform: scale(1.1);
          filter: brightness(0.6)
        }
      }

      .kk {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 3;
      }

      p:nth-child(3) {
        opacity: 0;
        font-size: 25px;
        font-weight: 600;
        color: #fff;
        position: absolute;
        z-index: 1;
        top: 3vw;
      }

      p:nth-child(4) {
        opacity: 0;
        width: 200px;
        color: #fff;
        font-size: 15px;
        position: absolute;
        z-index: 1;
      }

      .kk:hover~p {
        transition: 1.5s;
        opacity: 1;
      }
    }
  }
}
</style>
